<template>
  <div class="file-management">
    <main>
      <div class="table-wrapper">
        <div class="table-hint">
          <div class="hint-left">
            <el-form :model="searchForm" @submit.prevent>
              <el-row :gutter="10">
                <el-col :span="18">
                  <el-form-item label="姓&nbsp;&nbsp;&nbsp;&nbsp;名">
                    <el-input
                      :placeholder="'请输入客户姓名'"
                      v-model.trim="searchForm.keyword"
                      @keyup.enter="searchHandler"
                      style="width: 400px"
                    />
                  </el-form-item>
                  <el-form-item label="手机号">
                    <el-input
                      :placeholder="'请输入客户手机号'"
                      v-model.trim="searchForm.mobile"
                      @keyup.enter="searchHandler"
                      style="width: 400px"
                    />
                  </el-form-item>
                  <el-form-item label="核销人">
                    <el-select
                      v-model="searchForm.verifyAccountId"
                      placeholder="选择核销人"
                      style="width: 400px"
                    >
                      <el-option
                        v-for="item in verifyList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="已选择经销商">
                    <el-select
                      v-model="searchForm.dealerSelected"
                      placeholder="是否选择经销商"
                      style="width: 355px"
                    >
                      <el-option
                        v-for="item in dealerSelectedList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="经销商">
                    <el-select
                      v-model="searchForm.dealerId"
                      placeholder="选择经销商"
                      style="width: 400px"
                    >
                      <el-option
                        v-for="item in dealersList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="时间范围">
                    <el-date-picker
                      v-model="searchForm.timeRange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="x"
                      style="width: 400px"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <div class="form-btns">
                    <el-button type="primary" @click="searchHandler">查询</el-button>
                    <el-button class="reset-btn" @click="reset">重置</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="hint-right">
            <el-button class="upload-btn" @click="exportEXCEL">
              <svg-icon name="upload_icon" />导出</el-button
            ></div
          >
        </div>
        <div class="table-content fontPorscheNextRegular">
          <el-table v-loading="tableLoading" :data="tableState.dataList" style="width: 100%">
            <el-table-column prop="id" label="用户ID" />
            <el-table-column prop="phone" label="客户电话" />
            <el-table-column prop="name" label="客户姓名" />
            <el-table-column prop="dealerName" label="经销商" />
            <el-table-column prop="dealerSelected" label="已选择经销商" />
            <el-table-column prop="verifiedAccountName" label="核销人" />
            <el-table-column prop="modelName" label="车型" />
            <el-table-column prop="verified" label="抽奖状态" />
            <el-table-column prop="prizeLevel" label="奖品等级" />
            <el-table-column prop="verifyTime" label="核销时间" />
          </el-table>
        </div>
      </div>
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pageState.pageNumber"
          v-model:page-size="pageState.pageSize"
          :page-sizes="[10, 20, 50, 100, 1000]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableState.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </main>
  </div>
</template>
<script setup>
  import { getCustomers, getDealers } from '@/api/prize';
  import { exportArray2excel } from '@/utils/xlsx';
  const tableLoading = ref(false);
  const dealerSelectedList = ref([
    { value: null, name: '全部' },
    { value: true, name: '是' },
    { value: false, name: '否' },
  ]);
  const verifyList = ref([
    { value: null, name: '全部' },
    { value: 1, name: 'admin' },
    { value: 2, name: 'cadillac01' },
    { value: 3, name: 'cadillac02' },
    { value: 4, name: 'cadillac03' },
    { value: 5, name: 'cadillac04' },
    { value: 6, name: 'cadillac05' },
    { value: 7, name: 'cadillac06' },
    { value: 8, name: 'cadillac07' },
    { value: 9, name: 'cadillac08' },
    { value: 10, name: 'cadillac09' },
    { value: 11, name: 'cadillac10' },
    { value: 12, name: 'cadillac11' },
    { value: 13, name: 'cadillac12' },
    { value: 14, name: 'cadillac13' },
    { value: 15, name: 'cadillac14' },
    { value: 16, name: 'cadillac15' },
    { value: 17, name: 'cadillac16' },
    { value: 18, name: 'cadillac17' },
    { value: 19, name: 'cadillac18' },
    { value: 20, name: 'cadillac19' },
    { value: 21, name: 'cadillac20' },
    { value: 22, name: 'cadillac21' },
    { value: 23, name: 'cadillac22' },
    { value: 24, name: 'cadillac23' },
    { value: 25, name: 'cadillac24' },
    { value: 26, name: 'cadillac25' },
    { value: 27, name: 'cadillac26' },
    { value: 28, name: 'cadillac27' },
    { value: 29, name: 'cadillac28' },
    { value: 30, name: 'cadillac29' },
    { value: 31, name: 'cadillac30' },
    { value: 32, name: 'cadillac31' },
  ]);
  const dealersList = ref([]);
  const searchForm = reactive({
    keyword: '',
    mobile: '',
    dealerId: null,
    dealerSelected: null,
    verifyAccountId: null,
    timeRange: [], // 添加时间范围
  });
  const pageState = reactive({
    pageNumber: 1,
    pageSize: 100,
  });
  const tableState = reactive({
    total: 0,
    dataList: [],
  });

  const exportEXCEL = () => {
    const title = [
      '用户ID',
      '经销商',
      '客户姓名',
      '客户电话',
      '核销人',
      '车型',
      '已选择经销商',
      '抽奖状态',
      '奖品等级',
      '核销时间',
    ];
    const key = [
      'id',
      'dealerName',
      'name',
      'phone',
      'verifiedAccountName',
      'modelName',
      'dealerSelected',
      'verified',
      'prizeLevel',
      'verifyTime',
    ];

    exportArray2excel({
      key,
      data: tableState.dataList,
      title,
      filename: '礼品列表',
      autoWidth: true,
      isMarkErr: false,
    });
  };
  const handleCurrentChange = (val) => {
    pageState.pageNumber = val;
    getList();
  };
  const handleSizeChange = () => {
    searchHandler();
  };

  const getList = async () => {
    tableLoading.value = true;
    const searchData = {
      pageNum: pageState.pageNumber,
      pageSize: pageState.pageSize,
    };
    if (searchForm.keyword) {
      searchData.keyword = searchForm.keyword;
    }
    if (searchForm.mobile) {
      searchData.mobile = searchForm.mobile;
    }
    if (searchForm.dealerSelected !== null) {
      searchData.dealerSelected = searchForm.dealerSelected;
    }
    if (searchForm.dealerId !== null) {
      searchData.dealerId = searchForm.dealerId;
    }
    if (searchForm.verifyAccountId !== null) {
      searchData.verifyAccountId = searchForm.verifyAccountId;
    }
    if (searchForm.timeRange && searchForm.timeRange.length === 2) {
      // 开始时间保持不变（当天0点）
      searchData.startTime = searchForm.timeRange[0];
      // 结束时间设置为当天的23:59:59
      searchData.endTime = Number(searchForm.timeRange[1]) + 24 * 60 * 60 * 1000 - 1000;
    }
    const res = await getCustomers(searchData);
    if (res.code === 200) {
      tableState.total = res.data.total;
      tableState.dataList = res.data.records.map((e) => {
        return {
          ...e,
          verified: e.verified ? '已抽奖' : '未抽奖',
          dealerSelected: e.dealerSelected ? '是' : '否',
          prizeLevel:
            e.prizeLevel === 1
              ? '一等奖'
              : e.prizeLevel === 2
              ? '二等奖'
              : e.prizeLevel === 3
              ? '三等奖'
              : e.prizeLevel === 4
              ? '四等奖'
              : e.prizeLevel === 5
              ? '五等奖'
              : e.prizeLevel === 6
              ? '六等奖'
              : e.prizeLevel === 7
              ? '未中奖'
              : '',
        };
      });
    } else {
      console.log('------------', res);
    }
    tableLoading.value = false;
  };
  const reset = () => {
    searchForm.keyword = '';
    searchForm.mobile = '';
    searchForm.dealerId = null;
    searchForm.dealerSelected = null;
    searchForm.verifyAccountId = null;
    pageState.pageNumber = 1;
    searchForm.timeRange = []; // 重置时间范围
    getList();
  };
  const searchHandler = () => {
    pageState.pageNumber = 1;
    getList();
  };
  const getDealersFn = async () => {
    // 获取经销商
    const res = await getDealers({});
    if (res.code === 200) {
      dealersList.value = res.data.records.map((e) => {
        return {
          value: e.id,
          name: e.name,
        };
      });
      dealersList.value.unshift({
        value: null,
        name: '全部',
      });
    }
  };
  onMounted(() => {
    console.log('---------------11111111111111-');
    getDealersFn();
    getList();
  });
</script>
<style lang="scss" scoped>
  .file-management {
    main {
      padding: 20px;
      background: #fff;
      .table-hint {
        padding-right: 0px;
      }

      .hint-right {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        .upload-btn {
          .svg-icon {
            margin-right: 8px;
          }
        }
      }
      .table-content {
        padding: 0;
      }
    }
  }
</style>
